<template>
   <div v-if="playlisttow">
       <div class="topheader">
           <div class="img">
               <!-- <van-image
                lazy-load
                :src="playlisttow.coverImgUrl"
                /> -->
               <img v-lazy="playlisttow.coverImgUrl" alt="">
           </div>
           <div class="title">
                {{playlisttow.name}}
           </div>
           <div class="button"  @click="$router.push('/rank')">
               <span class="iconfont icon-zuoyou1"></span>
                {{playlisttow.tags[0] || "排行榜"}}
           </div>
       </div>
       <dl class="musicList">
           <dt v-if="playlisttow.tracks">
               <i class="iconfont icon-24gf-play"></i>播放全部<span>(共{{playlisttow.tracks.legth}}首)</span>
           </dt>
           <dd v-for="(item,index) in playlist" :key="item.id"  @click="setIds(item.id)">
               <h1>{{index+1}}</h1>
               <div class="info">
                   <h2>{{item.name}}</h2>
                   <h3><span v-for="value in item.ar" :key="value.id">{{value.name}}</span></h3>
               </div>
           </dd>
       </dl>
   </div>
</template>

<script>

import {getPlaylist} from "../../api/rank"

export default {
    data(){
        return{
            playlist:null,
            playlisttow:{
                coverImgUrl:"",
                tags:[""],
                tracks:[]

            }
        }
    },
    // props:["playerId"],
    methods:{
         getplay(){
            let querId = this.$route.query;
            if(!('id' in querId)){
                this.$router.push("/rank");
            }
             
            getPlaylist({id:querId.id}).then(data=>{
                // console.log(data);
                this.playlisttow=data.playlist
                this.playlist=data.playlist.tracks
            })
        },

        setIds(id){
            this.$emit("get-player-id",id)
            this.$emit("get-play-all-id",this.$route.query.id);//传递di
        },

        // tohome(){

        //     this.$router.push('/rank')
        //     // this.$emit("toId")
        // }
    },
    created(){
        this. getplay()
       
    }
}
</script>

<style lang="less">
 .topheader{
        position: relative;
        height: 270px;
        .img{
            background-color: aqua;
            width: 100%;
            height: 270px;
            position: relative;
            img{
                position: absolute;
                top:0px;
                left:0px;
                right: 0px;
                bottom: 0px;
                margin:auto;
                width: 100%;
            }
        }
        .title{
            font-size: 18px;
            position: absolute;
            left:18px;
            bottom:18px;
            color:#fff;
        }
        .button{
            font-size: 18px;
            position: absolute;
            left:12px;
            top:12px;
            color:#fff;
        }
}
     .musicList{
        background-color: #fff;
        width: 100%;
        border-radius: 7px;
        position: relative;
        top:-7px;
        padding-bottom:50px;
        dt{
            height: 36px;
            line-height: 36px;
            font-size: 16px;
            color:#454747;
            border-bottom: 1px solid #E3E3E3;
            span{
                font-size: 14px;
                color:#797B7A;
            }
            i{
                width: 44px;
                text-align: center;
                display: inline-block;
            }
        }
        dd{
            border-bottom: 1px solid #E3E3E3;
            height: 53px;
            display: flex;
            h1{
                flex: 0 0 44px;
                line-height: 53px;
                text-align: center;
                font-size: 16px;
                color:#6D6E6E;
            }
            .info{
                flex:1;
                h2{
                    font-size: 16px;
                    color:#1B1C1C;
                    margin-top: 10px;
                }
                h3{
                    font-size: 12px;
                    color:#929393;
                }
            }
        }
    }
</style>